<template>
  <div v-if="isRouterAlive">
    <p class="ContentName" @click.stop>
      <UserModules class="userFollow" ref="UserModules" v-on:UserClose="userclose"></UserModules>
      <el-button class="elbutton" type="text" @click="Open" :key="Existence">{{HeaderUserName}}</el-button>
      <LoginModules ref="LoginModules" v-on:UserName="userName"></LoginModules>
      <ArticleModules ref="ArticleModules"></ArticleModules>
    </p>
    <el-progress :percentage="processLength" :color="processColors" class="progressbottom"></el-progress>
    <BlogContentModules ref="BlogContentModules"></BlogContentModules>
    <ShowContentModules ref="ShowContentModules"></ShowContentModules>
  </div>
</template>

<script>
//中部内容
import BlogContentModules from "../modules/BlogContentModules"
import UserModules from "../modules/UserModules"
import LoginModules from "../modules/LoginModules";
import ShowContentModules from "../modules/ShowContentModules";
import ArticleModules from "../modules/ArticleModules";
export default {
  name: "CentralContent",
  components: {ArticleModules, ShowContentModules, BlogContentModules, UserModules, LoginModules},
  provide () {
    return {
      reload: this.reload
    }
  },
  data() {
    return{
      //有则@，无则？
      HeaderUserName: this.Global.BASE_NONE_USER_NAME,
      processLength: 20,
      processColors: 'rgba(19, 206, 144, 0.8)',
      Existence: 0,
      isRouterAlive: true
    }
  },
  created() {
    this.processColors = this.myDateColors();
    this.processLength = this.myDateProgress();
    this.selectredis();
  },
  mounted() {
    setInterval(() => {
      this.processColors = this.myDateColors();
      this.processLength = this.myDateProgress();
    },30000)
    //点击目标组件外部关闭
    document.addEventListener('click', (e) => {
      if(this.Existence == 1){
        this.$refs.UserModules.overuser();
      }
    })
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    //一天时间的进度条
    myDateProgress(){
      let hmcount = (parseInt(new Date().getHours()) * 60) + parseInt(new Date().getMinutes());
      if(hmcount >= 1440) return 100;
      else{
        let a = ((parseInt(hmcount) / 1440) * 100).toString().split("");
        let b = a[0]+a[1];
        return parseInt(b);
      }
    },
    //一天的早中晚颜色变换
    myDateColors(){
      let hmcount = (parseInt(new Date().getHours()) * 60) + parseInt(new Date().getMinutes());
      let a = ((parseInt(hmcount) / 1440) * 100).toString().split("");
      if(a <= 360) return 'rgba(0, 0, 0, 0.8)';
      else if(a <= 720) return 'rgba(19, 206, 144, 0.8)';
      else if(a <= 1080) return 'rgba(231, 227, 10, 0.8)';
      else return 'rgba(231, 109, 10, 0.8)';
    },
    //查询redis
    selectredis(){
      this.axios.get(this.Global.BASE_URL+'/login/SelectRedisUser').then((res)=>{
        if("1000" == res.data.msg) this.$CustomMessage_WAENING('验证','验证失效！');
        else if("2000" == res.data.msg){
          this.userName(res.data.data);
        }
        else if("3000" == res.data.msg) this.$CustomMessage_ERROR('验证','用户不存在！');
        else this.$CustomMessage_ERROR('验证','异常错误！');
      })
    },
    //登录账号
    userName(data){
      this.WhetherNot(1);
      this.HeaderUserName = this.Global.BASE_PREFIX_USER_NAME+data;
      this.$CustomMessage_OK('登录',data+' 登录成功！');
    },
    //注销
    Open(){
      if(this.Existence == 0) {
        this.$refs.LoginModules.singshow();
      }else{
        this.$refs.UserModules.showuser();
      }
    },
    userclose(data){
      if(data == 1){
        this.WhetherNot(0);
        this.HeaderUserName = this.Global.BASE_NONE_USER_NAME;
      }
    },
    //验证
    WhetherNot(data){
      if(data == 1) this.Existence = 1;
      else this.Existence = 0;
    },
    //仙人跳
    ContentShowOver(data,id){
      if(data == 1){
        this.$refs.ShowContentModules.showoverContent(1);
        this.$refs.ShowContentModules.DataContent(id);
      }
      else this.$refs.ShowContentModules.showoverContent(0);
    },
    ShowOverArticles(data){
      if(data == 1) this.$refs.ArticleModules.showoverArticles(1);
      else this.$refs.ArticleModules.showoverArticles(0);
    },
    //刷新博客内容
    ThisReload(){
      this.$refs.BlogContentModules.reloadCont()
    }
  }
}
</script>

<style scoped>
*{
  text-align: left;
}
.ContentName{
  background: white;
  text-align: right;
  height: auto;
  border-bottom: 2px solid #e5e9f2;
}
.progressbottom{
  margin: 10px 0px;
}
.elbutton{
  color: red;
  font-size: 16px;
}
.userFollow{
  position: absolute;
  z-index: 10;
  right: 0%;
  width: 30%;
}
</style>
